<template>
	<view class="houseList">
		<nav-bars backState="1000" :bgColor="background" fontColor="#000" title="房源信息"></nav-bars>
		<view class="citySelect">
			<image :src="`${baseImg}/static/adminShop/JLB.png`" mode=""></image>
			<view class="text">
				居联邦
				<!-- <text class="iconfont icon-arrow-left-copy"></text> -->
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="searchBox">
			<view class="city">桂林
			<!-- iconhuaban91 -->
				<text class="iconfont "></text>
			</view>
			<view class="searchInput">
				<text class="iconfont iconhuaban18"></text>
				<input type="text" confirm-type="搜索" @confirm="searchHouse" value="" v-model="keyword"  placeholder="请输入小区或商圈名称"/>
			</view>
		</view>
		<!-- 筛选 -->
		<view :class="{'dropdownBox':scrollTop>=100}" :style="scrollTop>=100?'top:'+navHeight+'px;':''">
			<u-dropdown active-color="#A98F68" title-size="24" inactive-color="#333" menu-icon="arrow-down-fill"  ref="uDropdown"
				menu-icon-size="14">
				<u-dropdown-item title="区域">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 500rpx;">
							<view class="u-text-center u-content-color u-p-20" :style="index==selectIndex?'background:#f1f1f1;':''" v-for="(item,index) in districtList" :key="index" @click="selectDistriFn(item,index)">{{item.city_name}}</view>
						</scroll-view>
						<button type="default" style="font: 600 30rpx/92rpx PingFang SC;color: #AE8C6C;" class="areaBtn" @click="closeDropdown">确定</button>
					</view>
				</u-dropdown-item>
				<!-- <u-dropdown-item v-model="region_name" title="区域" @change="compre_fn1" :options="options1"></u-dropdown-item> -->
				<u-dropdown-item v-model="sale_unit_price" title="价格" @change="compre_fn2" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="sale_room" title="户型" @change="compre_fn3" :options="options3"></u-dropdown-item>
				<u-dropdown-item v-model="sale_unit_price_sort" title="排序" @change="compre_fn4" :options="options4"></u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 房源列表 -->
		<view class="houseListBox">
			<view class="item" v-for="(item,index) in houseList" :key="index" @click="toHouseInfo(item.sale_no)">
				<image :src="item.thumb_url" mode=""></image>
				<view class="houseInfo">
					<view class="title"><view class="titText omit-1">{{item.sale_subject}}</view><text>{{item.sale_area}}m²</text></view>
					<scroll-view scroll-x="true" class="tag">
						<text v-for="(item1,index1) in item.tag_ids" :key="index1">{{item1}}</text>
					</scroll-view>
					<view class="address omit-1">{{item.region_name+item.section_name}}</view>
					<view class="price">{{item.sale_unit_price}}<text>元/平</text></view>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import service_houseJLB from '@/service/houseJLB.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				background:'#fff',
				keyword:'',
				region_name:'',//区域
				sale_unit_price:'',//价格
				sale_room:'',//户型
				sale_unit_price_sort:'',//排序
				options1:[{
					label:'全城',
					value:''
				}],
				options2:[{
					label:'全部',
					value:''
				},{
					label:'4000元/m²以下',
					value:'0,4000'
				},{
					label:'4000-5000元/m²',
					value:'4000,5000'
				},{
					label:'5000-6000元/m²',
					value:'5000-6000'
				},{
					label:'6000-7000元/m²',
					value:'6000,7000'
				},{
					label:'7000-8000元/m²',
					value:'7000,8000'
				},{
					label:'8000-9000元/m²',
					value:'8000,9000'
				},{
					label:'9000-10000元/m²',
					value:'9000,10000'
				},{
					label:'10000元/m²以上',
					value:'10000,100000'
				}],
				options3:[],
				options4:[{
					label:'全部',
					value:''
				},{
					label:'价格从低到高',
					value:'asc'
				},{
					label:'价格从高到低',
					value:'desc'
				}],
				houseList:[],
				scrollTop:0,
				navHeight:80,
				districtList:[],
				// selectDistri:{},
				selectIndex:''
			}
		},
		onLoad() {
			this.$utils.getUrl()
			this.navHeight = uni.getStorageSync('StatusBarHeight').height;
			this.getHouseType()
			this.getHouseList()
			this.getCity()
			this.getDistrict()
		},
		onPageScroll(e) {
			console.log(e)
			this.scrollTop = e.scrollTop
		},
		
		onReachBottom() {
			this.page++
			let params = {
				keyword:this.keyword,
				region_name:this.region_name,
				sale_unit_price:this.sale_unit_price,
				sale_room:this.sale_room,
				sale_unit_price_sort:this.sale_unit_price_sort
			}
			service_houseJLB.getHouseList(params).then(res=>{
				console.log(res,'房源列表')
				if(res.code==1){
					// res.data.photo_array = JSON.parse(res.data.photo_array)
					if(!res.data.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					res.data.map(item=>{
						if(item.tag_ids){
							item.tag_ids = item.tag_ids.split('|')
						}
					})
					this.houseList = this.houseList.concat(res.data)
					console.log(this.houseList,'====')
				}
			})
		},
		methods:{
			// 获取户型
			getHouseType(){
				service_houseJLB.getHouseType({type:'house_type'}).then(res=>{
					console.log(res,'户型')
					if(res.code==1){
						this.options3.push({
							label:'全部',
							value:''
						})
						res.data.map(item=>{
							this.options3.push({
								label:item.name,
								value:item.value
							})
						})
					}
				})
			},
			
			// 获取房源列表
			getHouseList(){
				this.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					keyword:this.keyword,
					region_name:this.region_name,
					sale_unit_price:this.sale_unit_price,
					sale_room:this.sale_room,
					sale_unit_price_sort:this.sale_unit_price_sort
				}
				service_houseJLB.getHouseList(params).then(res=>{
					console.log(res,'房源列表')
					if(res.code==1){
						// res.data.photo_array = JSON.parse(res.data.photo_array)
						if(res.data.length<10){
							this.statusLoading = 'nomore'
						}
						res.data.map(item=>{
							if(item.tag_ids){
								item.tag_ids = item.tag_ids.split('|')
							}
						})
						this.houseList = res.data?res.data:[],
						console.log(this.houseList,'====')
					}
				})
				uni.hideLoading()
			},
			
			// 获取城市
			getCity(){
				service_houseJLB.getCity({province_id:450000}).then(res=>{
					console.log(res,'城市')
				})
			},
			// 获取县区
			getDistrict(){
				service_houseJLB.getDistrict({city_id:450300}).then(res=>{
					console.log(res,'县区')
					if(res.code==1){
						this.districtList = res.data?res.data:[];
						this.districtList.unshift({
							city_name:'全城'
						})
					}
				})
			},
			
			// 进入房源详情
			toHouseInfo(sale_no){
				uni.navigateTo({
					url:'../houseInfo/index?sale_no='+sale_no
				})
			},
			
			// 选择区域
			selectDistriFn(item,index){
				this.region_name = item.city_name=='全城'?'':item.city_name;
				this.selectIndex = index
			},
			// 选择区域确定
			closeDropdown(){
				this.getHouseList()
				this.$refs.uDropdown.close();
			},
			
			// 选择价格
			compre_fn2(){
				this.getHouseList()
			},
			// 选择户型
			compre_fn3(){
				this.getHouseList()
			},
			// 排序按钮
			compre_fn4(){
				this.getHouseList()
			},
			// 搜索
			searchHouse(){
				this.getHouseList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.houseList{
		position: relative;
		background-color: #fff;
		.citySelect{
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 11rpx;
			}
			.text{
				display: flex;
				align-items: center;
				font: bold 28rpx/64rpx PingFang SC;
				color: #333;
				.iconfont{margin-left: 10rpx;}
			}
		}
		// 搜索框
		.searchBox{
			padding: 20rpx 27rpx;
			width: 690rpx;
			height: 80rpx;
			background-color: #F1F1F1;
			border-radius: 40rpx;
			margin: 21rpx auto 20rpx;
			display: flex;
			.city{
				flex-shrink: 0;
				font: bold 28rpx/40rpx PingFang SC;
				color: #333333;
				border-right: 2rpx solid #DFDFDF;
				text{
					font:500 20rpx/40rpx PingFang SC;
					padding: 0 20rpx 0 9rpx;
					color: #878787;
				}
			}
			.searchInput{
				width: 100%;
				display: flex;
				align-items: center;
				.iconfont{
					padding: 0 9rpx 0 20rpx;
					font:500 28rpx/40rpx PingFang SC;
					color: #878787;
				}
				input{
					width: 100%;
				}
			}
		}
		// 筛选
		.dropdownBox{
			width: 100%;
			position: fixed;
			background-color: #fff;
			left: 0;
			z-index: 999;
			.areaBtn{
				background-color: #f1f1f1;
			}
			.u-text-center .u-content-color .u-p-20{
				padding: 20rpx 0 !important;
			}
			.u-text-center .u-content-color .u-p-20.active{
				background-color: #f1f1f1;
			}
		}
		
		// 房源列表
		.houseListBox{
			padding: 20rpx 29rpx 0 32rpx;			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				image{
					flex-shrink: 0;
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}
				.houseInfo{
					.title{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font: bold 34rpx/40rpx PingFang SC;
						color: #333;
						.titText{
							width: 330rpx;
						}
						text{
							font: bold 20rpx/30rpx PingFang SC;
							color: #AE8C6C;
							padding: 0 5rpx 0 8rpx;
							border: 1rpx solid #AE8C6C;
							border-radius: 5rpx;
						}
					}
					.tag{
						margin: 10rpx 0;
						width: 450rpx;
						white-space:nowrap;
						text{
							display: inline-block;
							margin-right: 10rpx;
							padding: 5rpx 7rpx;
							background-color: #F4EBDC;
							border-radius: 3rpx;
							color: #AE8C6C;
							font: 500 22rpx/30rpx PingFang SC;
						}
					}
					.address{
						width: 440rpx;
						color: #666666;
						font: 500 24rpx/42rpx  PingFang SC;
					}
					.price{
						font: 800 38rpx/40rpx PingFang SC;
						color: #F66036;
						text{
							margin-left: 5rpx;
							font: bold 20rpx/39rpx PingFang SC;
						}
					}
				}
			}
		}
	}
</style>
